<template>
	<view>
		<!-- 设备分类 -->
		<view style="padding: 10rpx;" v-for="(item,index) in DeviceList" :key="index">
			<view v-if="item.children.length">
				<text style="font-size: 13px;color: #afadc4;">{{item.ApplianceTypeName}}:</text>
			</view>

			<uni-row class="CommonBox" :gutter="20">
				<uni-col v-for="(ReItem,index) in item.children" :key="index" :span="ColSpan" :md="{span: 6}"
					:lg="{span: 4}">
					<view class="CommonCard" @click="ChoiceDevice(ReItem)">
						<u--image :showLoading="true" :src="judgeImg(ReItem.FilePath)" mode="widthFix" width="30px"
							height="30px"></u--image>

						<text style="font-size: 20rpx;margin-left: 15rpx;">{{ReItem.DeviceName}}</text>
					</view>
				</uni-col>
			</uni-row>

		</view>
	</view>
</template>

<script>
	export default {
		name: "Device",
		props: {
			TitleText: {
				type: String,
				default: ''
			},
			DeviceList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				ColSpan: 12
			};
		},
		onLoad() {

			// #ifdef APP-PLUS
			let webView = this.$scope.$getAppWebview();
			webView.setStyle({
				titleNView: {
					autoBackButton: false
				}
			})
			// #endif

		},
		created() {
			// 同步获取系统信息
			let systemInfo = uni.getSystemInfoSync()
			// px转rpx
			// let pxToRpxScale = 750 / systemInfo.windowWidth;
			// 可视窗口宽度
			let ktxWindowWidth = systemInfo.windowWidth
			// console.log(ktxWindowWidth)

			if (ktxWindowWidth <= 500) { // 一行两个
				this.ColSpan = 12
			} else if (ktxWindowWidth > 500 && ktxWindowWidth < 1000) { // 一行三个
				this.ColSpan = 8
			}
		},
		methods: {
			judgeImg(data) {
				var that = this;
				// console.log(this.DeviceList)
				if (data == null) {
					return ''
				} else if (!/^http[s]?:\/\/.*/.test(data)) {
					return that.Request.IPAgreement() + that.Request.serverIP() + data
					// return 'http://' + '39.105.222.87:20000' + data
				} else {
					return data
				}
			},
			ChoiceDevice(data) { // 选中分类设备

				// this.$emit("ToOtherCloseFindBlue")
				// return
				// console.log(data);
				const deviceNames = ['游标卡尺', '千分尺', '高度尺', '千分表', '深度尺', '光谱仪', '三坐标', '串口', '影像测量仪', '百分表'];

				if (deviceNames.includes(data.DeviceName)) {



					uni.navigateTo({
						url: `/st_qms/DeviceInfoList/DeviceInfoList?Name=${data.DeviceName}&ClassifyID=${data.MeasureTypeID}`,
						// success: function(result) {
						// 	uni.$emit("sendDeviceType", data);
						// }
					});
				} else {
					uni.showToast({
						title: '暂未授权该设备',
						icon: "none",
					});
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	// 设备
	.CommonBox {
		// margin-bottom: 10px;

		// 组件在小程序端display为inline
		// QQ、抖音小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */


		.uni-col {
			margin-top: 10px;
			min-height: 100px;
		}


		.CommonCard {
			height: 80px;
			background-color: #f5f5f5;
			border-radius: 20px;
			// box-shadow: 1px 1px 7px -5px #333;
			color: #7e7e81;
			padding: 6px 10px;
			display: flex;
			// justify-content: space-around;
			align-items: center;
		}
	}

	// 支付宝小程序没有 CommonBox 层级
	// 微信小程序使用了虚拟化节点，没有 CommonBox 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10rpx;
	}

	/* #endif */


	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 5rpx 10rpx 0;
		overflow: hidden;
	}
</style>